<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/skitter.styles.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<!--<script type="text/javascript" src="js/init.js"></script>-->
		<style>
			.box_skitter_large{
				width: 100%;
			}
			.info_slide_dots{
				display: none !important;
			}
			.image,.image_main{
				height: 100% !important;
			}
			.bounce{
				-webkit-animation:bounce 1s .2s ease infinite;
				-moz-animation:bounce 1s .2s ease infinite;
			}
			@-webkit-keyframes bounce{
				0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
				40%{-webkit-transform:translateY(-30px)}
				60%{-webkit-transform:translateY(-15px)}
			}
			@-moz-keyframes bounce{
				0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
				40%{-moz-transform:translateY(-30px)}
				60%{-moz-transform:translateY(-15px)}
			}
			.guide{
				width: 20%;
				position: absolute;
				bottom: 10%;
				left: 40%;
				z-index: 1001;
			}
		</style>
	</head>
	<body>
	    <div id="content" class="box_skitter box_skitter_large" style="margin:0;padding:0">
	      	<ul>
		        <li>
		        	<a href="#cube"><img src="img/1.jpg" class="cube"/></a>
		        </li>
		        <li>
		        	<a href="#cubeRandom"><img src="img/2.jpg" class="cubeRandom" /></a>
		        </li>
		        <li>
		        	<a href="#block"><img src="img/3.jpg" class="block"/></a>
		        </li>
		        <li>
		        	<a href="#directionLeft"><img src="img/4.jpg" class="directionLeft"/></a>
		        </li>
		        <li>
		        	<a href="#cubeHide"><img src="img/5.jpg" class="cubeHide"/></a>
		        </li>
		        <li>
		        	<a href="#cubeSize"><img src="img/6.jpg" class="cubeSize" /></a>
		        </li>
		        <li>
		        	<a href="#horizontal"><img src="img/7.jpg" class="horizontal"/></a>
		        </li>
		        <li>
		        	<a href="#showBars"><img src="img/8.jpg" class="showBars" /></a>
		        </li>
		        <li>
		        	<a href="#showBarsRandom"><img src="img/9.jpg" class="showBarsRandom"/></a>
		        </li>
		        <li>
		        	<a href="#tube"><img src="img/10.jpg" class="tube" /></a>
		        </li>
		    </ul>
	    </div>
		<img src="../HK/img/point.png" class="bounce guide"/>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/jquery.skitter.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var skitterA = $('.box_skitter_large').skitter({
				fullscreen: true,
				auto_play: false,
				label: false,
				interval: 1000000,
			});
			
			/***禁止滑动***/
			var mo = function(e){e.preventDefault();};
			function stop(){
		        document.body.style.overflow='hidden';        
		        document.addEventListener("touchmove",mo,false);//禁止页面滑动
			}
			stop();
		});
	</script>
</html>
